Gyazo OGP画像デザイン
https://gyazo.com/16efd5b5c35bf64b735627f07b694900
概要
NOTA Inc.のプロダクトであるGyazoのOGP画像のデザインを行った。デザイン及び実装の担当。作業期間2日間のスモールタスク。 背景
GyazoのLPにはOGPとtwitterカードの画像が適切に指定されていなかった。
ソーシャルメディアで共有された際の見栄えが非常に悪い。
https://gyazo.com/e64439f4e36a50d62f2a65ffa9554fe5
スケッチ
以下の方針を立ててスケッチ展開
サービスの内容を連想させるためにキャプチャーUIの一部を表現。
ブランドを印象づけるためにアイコンとブランドカラーを前面に出す。
https://gyazo.com/47bce880f8368dc5f30c5624f41901f7
他社のOGP画像とも比較しながら調整を重ねる。
https://gyazo.com/f7584939604edf74f7541fc2da2e4c78
最終案
https://gyazo.com/16efd5b5c35bf64b735627f07b694900
検証
URLからOGPの設定をバリデーションしくれるサイトを利用。stagingに上げたものでは表示してくれなかったのでngrokを使って確認。その上でサイズやカラーなど細かい点を調整。 リリース
twitter上で動作を確認
https://gyazo.com/044f38a915932d00c721fcf54e2859c3
slack上ではこんな感じ
https://gyazo.com/6ca0e6cb3ccedbb0216f836251b35d00